<script lang="ts" setup>
import { computed } from "vue";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRouter } from "vue-router";
const router = useRouter();
const multiTags = computed(() => {
  return useMultiTagsStoreHook()?.multiTags;
});
const onCloseTags = () => {
  router.push({
    name: "sponsorApproval"
  });
};
const goBack = () => {
  router.push({
    name: "sponsorApproval"
  });
};
import { ref } from "vue";
const stepValue = ref(1);

import firstStep from "./info/firstStep.vue";
import secondStep from "./secondStep/index.vue";
import thirdStep from "./preview/index.vue";
import fourthStep from "./result/index.vue";
</script>
<template>
  <el-card class="m-[20px]">
    <template #header>
      <el-page-header @back="goBack">
        <template #content>
          <span class="mr-3 text-large font-600"> 创建项目 </span>
        </template>
      </el-page-header>
    </template>
    <el-steps
      style="max-width: 900px"
      class="mt-[20px] m-auto"
      :active="stepValue"
      align-center
    >
      <el-step title="填写项目信息" />
      <el-step title="子项目清单" />
      <el-step title="预览" />
      <el-step title="确认提交" />
    </el-steps>
    <firstStep
      v-if="stepValue === 1"
      @submitClick="val => (stepValue = val)"
      @closeClick="onCloseTags"
    />
    <secondStep
      v-if="stepValue === 2"
      @submitClick="val => (stepValue = val)"
      @closeClick="onCloseTags"
    />
    <thirdStep
      v-if="stepValue === 3"
      @submitClick="val => (stepValue = val)"
      @closeClick="onCloseTags"
    />
    <fourthStep v-if="stepValue === 4" />
  </el-card>
  <div class="h-[80px]"></div>
</template>
<style lang="scss" scoped></style>
